<template>
  <div class="main">

    <div class="top">
      <div class="left">
        <van-image width="50" height="50" round src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
        <div class="name">
          <span>{{name}}</span>
          <span style="border: 1px solid #ccc ; font-size: 10px; margin-left: 5px;">1级</span>
        </div>
        <div class="mony" style="width: 250px;">
          <span style="border: 1px solid #ccc ; font-size: 10px;">押金200.00元</span>
          <van-icon name="question" />
          <span style="border: 1px solid #ccc ; font-size: 12px; margin-left: 5px;">欠款0.00元</span>
          <van-icon name="question" />
        </div>


      </div>
      <div class="righ">
        <div @click="deldata"
          style="margin-bottom: 5px; width: 80px; height: 20px; border: 1px solid #ccc; text-align: center; border-radius: 15px 0px 0px 15px; background-color: skyblue; color: #fff; font-size: 12px;">
          注销</div>
        <div
          style="width: 80px; height: 20px; border: 1px solid #ccc; text-align: center; border-radius: 15px 0px 0px 15px; background-color: skyblue; color: #fff; font-size: 12px;">
          切换书吧</div>

      </div>
    </div>
    <div class="yuedu">
      <div>
        <p style="font-size: 10px;">总阅读量</p>
        <p style="text-align: center; font-size: 14px;">0本</p>
      </div>
      <div>
        <p style="font-size: 10px; ">我还能借</p>
        <p style="text-align: center; font-size: 14px;">6本</p>

      </div>
      <div>
        <p style="font-size: 10px;">最近还书日</p>
        <p style="text-align: center; font-size: 14px;">2023-06-13</p>

      </div>
    </div>
    <div class="fuwo">
      <div class="fuwu-top">

        <p><van-icon class="iconfont icon-zhishiku">

          </van-icon>&nbsp;我的服务</p>
      </div>
      <div class="fuwu-under">
        <van-grid :column-num="4" square :border=false>
          <van-grid-item v-for="item in menuArr" :key="item.id" @click="topath(item)">
            <van-icon :class="item.icon" style="font-size: 20px;"></van-icon>
            <span style="font-size: 10px;">{{ item.text }}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </div>


    <!-- 底部 -->
    <my-footer></my-footer>

  </div>
</template>

<script setup lang="ts">
import { getMenuData } from "@/data/menu"
import MyFooter from "@/components/MyFooter.vue";
import { reactive ,ref} from "vue"
import type { iconProps } from "vant";

import { useRouter } from "vue-router";
let router = useRouter()
let name = ref(localStorage.getItem('login'))



let $router = useRouter()


interface Imenu {
  id?: string
  icon?: string
  text?: string
  path?: string
}

let menuArr: Array<Imenu> = reactive<Array<Imenu>>([])
menuArr.push(...getMenuData())
function deldata(){
  localStorage.removeItem('login')
  localStorage.removeItem('token')
  localStorage.removeItem('flag')
  router.push('/login')
}

const topath = (item:any)=>{
  console.log(item.path);
  $router.push(item.path)
}

</script>

<style scoped lang="less">
.main {
  width: 100%;
  height: 100%;
  // margin-bottom: 50px;
  overflow: auto;
}

.top {
  margin-top: 20px;
  /* margin-top: 10px; */
  height: 60px;
  // background-color: yellow;
  // text-align: center;
  /* display: flex; */
  /* justify-content: space-around; */
  /* align-items: center; */
  padding-top: 10px;

  .left {
    float: left;
  }

  .van-image {
    // text-align: center;
    float: left;
    margin: 0 10px 0px 10px;
  }

  .righ {
    float: right;
  }

}

.yuedu {
  margin: 0 auto;
  margin-top: 20px;
  border-radius: 30px;
  width: 90%;
  background-color: #4fc08d;
  height: 60px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  color: #fff;
}

.fuwu-top {
  p {
    margin-top: 20px;
    margin-left: 10px;
  }

}


.toplist {
  height: 80px;
  background-color: green;
}

.van-grid {
  margin: 10px 30px 0 30px;
  border: 1px solid #ccc;

}

.fuwu-under {
  margin-bottom: 50px;
}</style>